<template>
  <div class="iconList">
    <van-grid :border="false" :column-num="8">
      <van-grid-item v-for="(item, index) in iconList" :key="item.id">
        <i :class="[(item.type + ' ' + item.name),{active: index == currentIconIndex}]" @click="handleSelect(index,item)"></i>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
// 作者：YCH
// 时间：2022年11月06日 22:06:42
import { ref } from "vue";
import useCollectEditStore from "@/stores/modules/collectEdit.js";
import useOperatorBoxStore from "@/stores/modules/operatorBox.js";

const props = defineProps({
  iconList: {
    type: Array,
    default: [],
  },
});
const currentIconIndex = ref();
// 点击选择icon
const handleSelect = (index,item) =>{
  currentIconIndex.value = index;
  useCollectEditStore().setIcon(item.type + ' ' + item.name)
  useCollectEditStore().setIconColor('')
  useOperatorBoxStore().showOverlay(true, 'edit');
}
</script>

<style lang="less" scoped>
.iconList {
  height: 56vh;
  overflow-y: auto;
  box-sizing: border-box;
  scroll-behavior: smooth;
  overscroll-behavior: contain; //必须加这个，不然会带动整个屏幕滚动，如果整屏幕也有滚动的话
}
.iconList::-webkit-scrollbar {
  display: none;/*隐藏滚动条*/
}
i.active{
  color: #FDC830;
}
</style>
